<template>
  <div class="layout">
    <div class="top" v-show="store.menuIsShow">
      <div class="top-left">
        <img src="@/assets/images/logo.png" alt="" />
        <div class="text">郑州联通城市大脑</div>
      </div>
      <div class="top-right">
        <div class="button" @click="clickAi">
          <SmileOutlined />
        </div>
        <div class="button" @click="clickLS">
          <DesktopOutlined />
        </div>
        <div class="avatar">A</div>
      </div>
    </div>
    <div class="menu-content">
      <div class="menu" v-show="store.menuIsShow">
        <a-menu
          mode="inline"
          :items="menuList"
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          @click="clickMenuItem"
        ></a-menu>
      </div>
      <div class="content">
        <a-breadcrumb class="breadcrumb">
          <a-breadcrumb-item>{{ breadcrumbValue.value1 }}</a-breadcrumb-item>
          <a-breadcrumb-item>{{ breadcrumbValue.value2 }}</a-breadcrumb-item>
        </a-breadcrumb>
        <div class="content-box">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
  <IntelligentAssistant
    :open="openIntelligentAssistant"
    @cancel="cancelIntelligentAssistant"
  ></IntelligentAssistant>
</template>
<script setup lang="ts">
  // 引入组件
  import {
    DesktopOutlined,
    UnorderedListOutlined,
    BookOutlined,
    AlertOutlined,
    SecurityScanOutlined,
    ExceptionOutlined,
    ApartmentOutlined,
    SmileOutlined,
    ToolOutlined,
  } from '@ant-design/icons-vue'
  import IntelligentAssistant from './IntelligentAssistant.vue'
  // 引入方法
  import {
    defineProps,
    defineEmits,
    watch,
    onMounted,
    ref,
    reactive,
    h,
  } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useCounterStore } from '../store/store'
  const props = defineProps({})
  const emits = defineEmits([])
  // 自定义状态
  const store = useCounterStore()
  const router = useRouter()
  const route = useRoute()
  const menuList = ref([])
  const menuListData = ref([
    {
      label: '工单统计',
      key: '1',
      icon: () => h(UnorderedListOutlined),
      children: [
        {
          isShow: true,
          parentId: '1',
          label: '业务报告',
          key: '11',
          path: '/business-report',
        },
        {
          isShow: true,
          parentId: '1',
          label: 'VPN 自动打网',
          key: '12',
          path: '/VPN-auto',
        },
        {
          isShow: false,
          parentId: '1',
          label: 'VPN 自动打网',
          key: '12',
          path: '/process-details',
        },
      ],
    },
    {
      label: '知识库',
      key: '2',
      icon: () => h(BookOutlined),
      children: [
        {
          isShow: true,
          parentId: '2',
          label: '文档管理',
          key: '21',
          path: '/document-management',
        },
        {
          isShow: true,
          parentId: '2',
          label: '个人收藏',
          key: '22',
          path: '/personal-collection',
        },
        {
          isShow: true,
          parentId: '2',
          label: '模板管理',
          key: '23',
          path: '/template-management',
        },
      ],
    },
    // {
    //   label: '云盾告警',
    //   key: '3',
    //   icon: () => h(AlertOutlined),
    //   children: [
    //     {
    //       isShow: true,
    //       label: '活动告警',
    //       key: '31',
    //       path: '/events',
    //     },
    //     {
    //       isShow: true,
    //       label: '历史告警',
    //       key: '32',
    //       path: '/history',
    //     },
    //     {
    //       isShow: true,
    //       label: '告警统计',
    //       key: '33',
    //       path: '/statistics',
    //     },
    //   ],
    // },
    {
      label: '巡检管理',
      key: '4',
      icon: () => h(SecurityScanOutlined),
      children: [
        {
          isShow: true,
          label: '巡检任务',
          key: '41',
          path: '/inspection-task',
        },
        {
          isShow: true,
          label: '巡检记录',
          key: '42',
          path: '/inspection-record',
        },
        {
          isShow: true,
          label: '巡检结果',
          key: '43',
          path: '/inspection-result',
        },
      ],
    },
    {
      label: '日志',
      key: '5',
      icon: () => h(ExceptionOutlined),
      children: [
        {
          isShow: true,
          label: '操作日志',
          key: '51',
          path: '/operation-log',
        },
        {
          isShow: true,
          label: '系统日志',
          key: '52',
          path: '/system-log',
        },
      ],
    },
    // {
    //   label: '权限管理',
    //   key: '6',
    //   icon: () => h(ApartmentOutlined),
    //   children: [
    //     {
    //       isShow: true,
    //       label: '用户管理',
    //       key: '61',
    //       path: '/user-management',
    //     },
    //     {
    //       isShow: true,
    //       label: '角色管理',
    //       key: '62',
    //       path: '/role-management',
    //     },
    //   ],
    // },
    {
      label: '其他',
      key: '7',
      icon: () => h(ToolOutlined),
      children: [
        {
          isShow: true,
          label: '系统设置',
          key: '71',
          path: '/system-settings',
        },
        {
          isShow: true,
          label: '城市大脑',
          key: '72',
          path: '/large-screen',
        },
        {
          isShow: true,
          label: '智能助手',
          key: '73',
          path: '/intelligent-assistant',
        },
      ],
    },
  ])
  const breadcrumbValue = ref({
    value1: undefined,
    value2: undefined,
  })
  const openKeys = ref([])
  const selectedKeys = ref([])
  const openIntelligentAssistant = ref(false)
  onMounted(() => {
    menuList.value = menuListData.value.map(item => {
      let children = []
      item.children.forEach(itemTwo => {
        if (itemTwo.isShow) {
          return children.push(itemTwo)
        }
      })
      return { ...item, children }
    })
  })
  //监听路由
  watch(
    () => route,
    value => {
      selectedKeys.value = []
      menuListData.value.forEach(item => {
        item.children.forEach(itemTwo => {
          if (itemTwo.path === value.path) {
            breadcrumbValue.value.value1 = item.label
            breadcrumbValue.value.value2 = itemTwo.label
            openKeys.value.push(item.key)
            selectedKeys.value.push(itemTwo.key)
          }
        })
      })
    },
    {
      immediate: true,
      deep: true,
    }
  )
  // 自定义方法
  //点击大屏按钮
  const clickLS = () => {
    router.push('/large-screen')
  }
  //点击智能助手按钮
  const clickAi = () => {
    router.push('/intelligent-assistant')
  }
  //关闭智能助手
  const cancelIntelligentAssistant = () => {
    openIntelligentAssistant.value = false
  }
  //点击菜单项
  const clickMenuItem = ({ item, key, keyPath }) => {
    router.push(item.path)
  }
</script>
<style lang="less" scoped>
  .layout {
    height: 100%;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 (20 / @vw);
      width: 100%;
      height: (72 / @vh);
      border-bottom: 1px solid #efefef;
      .top-left {
        display: flex;
        align-items: center;
        img {
          margin-right: (20 / @vw);
          height: (28 / @vh);
        }
        .text {
          font-size: (20 / @vw);
          font-weight: bold;
        }
      }
      .top-right {
        display: flex;
        align-items: center;
        .button {
          margin-right: (20 / @vw);
          width: (32 / @vw);
          height: (32 / @vw);
          border: 1px solid rgba(0, 0, 0, 0.45);
          border-radius: (32 / @vw);
          text-align: center;
          line-height: (32 / @vw);
          font-size: (16 / @vw);
          color: rgba(0, 0, 0, 0.45);
          cursor: pointer;
        }
        .avatar {
          width: (32 / @vw);
          height: (32 / @vw);
          background-color: @tc;
          border-radius: (32 / @vw);
          text-align: center;
          line-height: (32 / @vw);
          color: #fff;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
    .menu-content {
      display: flex;
      height: 100%;
      padding-bottom: (72 / @vh);
      .menu {
        width: (264 / @vw);
        height: 100%;
        overflow: auto;
        border-right: 1px solid #efefef;
        &::-webkit-scrollbar {
          display: none;
        }
      }
      .content {
        flex: 1;
        padding: (24 / @vw);
        background-color: #f5f5f5;
        overflow: auto;
        &::-webkit-scrollbar {
          display: none;
        }
        .breadcrumb {
          margin-bottom: (20 / @vh);
        }
        .content-box {
          overflow: auto;
          &::-webkit-scrollbar {
            display: none;
          }
        }
      }
    }
  }
</style>
